<template>
  <div class="app_box" :style="'background: url(' + bgPng + ') center top no-repeat; background-size:100% 100%' " >
    <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
    <div class="fix">
      <div class="box">
        <!--@click="down(item.url)"-->

        <ul  class="loadapp">
            <div v-if="isAndroid">
              <li @click="down(datalist.url)" v-if="datalist.url != ''"><img src="../../assets/images/ico_androld.png"/>
                Androld {{$t('app.downs')}}
              </li>
            </div>

          <div v-if="isIOS">
            <li v-if="datalist.url" @click="down(datalist.url)" class="on"><img src="../../assets/images/ico_iphone.png"/>
              {{ $t('app.doc1') }}
<!--              iPhone {{$t('app.downs')}}国内-->
            </li>
            <li v-if="datalist.foreignUrl" @click="down(datalist. foreignUrl)" class="on"><img src="../../assets/images/ico_iphone.png"/>
              iPhone {{$t('app.downs')}}{{ $t('app.doc3') }}
            </li>
            <li v-if="datalist.tfUrl" @click="down(datalist.tfUrl)" class="on"><img src="../../assets/images/ico_iphone.png"/>
              iPhone {{$t('app.downs')}}TF
            </li>

            <li v-if="datalist.superUrl" @click="down(datalist.superUrl)" class="on"><img src="../../assets/images/ico_iphone.png"/>
              {{ $t('app.doc2') }}
            </li>


          </div>



        </ul>
        <div class="p">
          {{$t('app.text')}}
          <p>{{$t('app.text2')}}</p>
          <p>{{url}} <button  v-clipboard:copy="url" v-clipboard:success="onCopy">{{$t('app.text3')}}</button></p>
        </div>
      </div>
    </div>


  </div>
</template>
<script>
  export default {
    data() {
      return {
         titleSize: this.$t("bargain.loadapp"),
        bgPng: require("../../assets/images/bg_app.png"),
        logoPng: require("@/assets/images/ewmlogo.png"),
        androidLoadPng: require("@/assets/images/android.png"),
        iosLoadPng: require("@/assets/images/iosload.png"),
        is_mt:true,
        datalist:[],
        isAndroid:false,
        isIOS:false,
        is_tf:'',
        os:localStorage.getItem("os"),
        url:''
      };
    },

    components: {},
    created(){
      let lang = localStorage.getItem("language") || "zh";
      if("en" == lang){
        this.bgPng =  require("@/assets/images/en/bg_app.png");
      } else if("jp" == lang){
        this.bgPng =  require("@/assets/images/jp/bg_app.png");
      } else if("vi_VN" == lang) {
        this.bgPng =  require("@/assets/images/vi/bg_app.png");
      }


      let u = navigator.userAgent;
      this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    },
    mounted() {
      this.url = window.location.protocol + '//' + window.location.host + this.$route.path
      console.log(window.location.protocol + '//' + window.location.host + this.$route.path ,'http')
      if(this.isIOS){
        this.is_tf = 1
      }else{
        this.is_tf = 0
      }
      this.$post(this.URL.doc.version, {
      }).then(res => {
        if (res.code == 0) {
          let is_tf = this.is_tf
          let name1 = res.data.find(function (item) {
            return item.type == is_tf
          })
          this.datalist = name1
          console.log(name1)


        } else {
          this.$toast(res.message);
        }
      });


    },
    methods: {
      onCopy(){
        this.$toast(this.$t('toast.copy_success'));
      },
      down(url){
        window.location.href = url
      },
    }
  };
</script>

<style lang="less" scoped>
  .app_box {
    height:16.24rem;
    width: 100%;
    .fix {
      width: 100%;
      padding-top:4.8rem;
      .box {
        width: 6.5rem;
        margin: 0 auto;
        ul {
          margin-bottom: .3rem;
          li {
            height: .96rem;
            line-height: .96rem;
            border-radius: .13rem;
            font-size: .31rem;
            font-weight: 400;
            text-align: center;
            background: #FFA531;
            color: #fff;
            margin-bottom: .2rem;
            img {
              height: .56rem;
              vertical-align: middle;
              margin-right: .1rem;
            }
          }
          li.on {
            background: #fff;
            color: #333;
          }
        }
        .p {
          width: 5.5rem;
          color: #fff;
          font-size: .24rem;
          text-indent: -.5rem;
          padding-bottom:1.2rem;
          margin-left: .5rem;
          button {
            background: none;border:1px solid #fff;
            color: #fff;
            padding: 0 .24rem;
            margin-left: .1rem;
          }
          p {
            padding-left: .5rem;
            &:first-child {
              margin-top: .2rem;
            }
          }
        }
      }
    }
  }
</style>
